import React, { useEffect, useState } from 'react';
import { useSearchParams, useNavigate } from 'react-router-dom'; //路由
import '../../css/admin/adminAdd.scss'
import type { CascaderProps, FormInstance } from 'antd';
import { Button, Form, Input, Cascader, Radio, Switch, message } from 'antd';
import { departmentlist, adminadd, adminShow, adminedit } from '../../api/admin'




const AdminAdd: React.FC = () => {
    const navigate = useNavigate() //路由

    const [paramsInfo] = useSearchParams()
    const listId: any = paramsInfo.get('id')
    console.log(listId);


    // id数据
    const adminshowList = async () => {
        const res: any = await adminShow({ id: listId })
        console.log(111, res.data);
        res.data.pwd = ''
        res.data.department = ''
        formRef.current.setFieldsValue(res.data)
    }



    const formRef: any = React.useRef<FormInstance>(null);

    const onFinish = async (values: any) => {
        if (values.is_use === true) {
            values.is_use = 1
        } else {
            values.is_use = 2
        }
        values.department = values.department.slice(-1)[0]
        console.log('Success:', values);
        if (!listId) {
            const res: any = await adminadd({
                admin_name: values.admin_name,
                email: values.email,
                mobile: values.mobile,
                is_use: values.is_use,
                pwd: values.pwd,
                repwd: values.repwd,
                real_name: values.real_name,
                wechat: "wx",
                qq: "qq",
                remarks: values.remarks,
                role: values.role,
                department: values.department
            })
            console.log(res);
            if (res.code === '00000') {
                formRef.current?.resetFields();
                message.success("添加成功")
            } else {
                message.error("添加失败")
            }
        } else {
            const res: any = await adminedit({
                admin_id: listId,
                formdata: {
                    admin_name: values.admin_name,
                    email: values.email,
                    mobile: values.mobile,
                    is_use: values.is_use,
                    pwd: values.pwd,
                    repwd: values.repwd,
                    real_name: values.real_name,
                    wechat: "wx",
                    qq: "qq",
                    remarks: values.remarks,
                    role: values.role,
                    department: values.department
                }
            })
            console.log(res);
            if (res.code === '00000') {
                formRef.current?.resetFields();
                message.success("修改成功")
                navigate('/index/adminList')
            } else {
                message.error("修改失败")
            }
        }
    };
    const fieldName: any = {
        label: 'name',
        value: "id",
        children: "son"
    }
    const [departmentdata, useDepartment] = useState([])

    const Department = async () => {
        const res: any = await departmentlist({})
        console.log(res);
        if (res.code === "00000") {
            useDepartment(res.data)
        }
    }

    const onReset = () => {
        formRef.current?.resetFields();
    };

    useEffect(() => {
        Department()
        adminshowList()
    }, [])
    return (<>
        <h1 className='adminAddword'>添加</h1>
        <div>
            {/* <div className='adminAddLeft'> */}
            <Form className='adminAdd'
                name="basic"
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 16 }}
                ref={formRef}
                style={{ maxWidth: "100%" }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                // onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <div className='adminAddLeft'>
                    {/* 管理员名称 */}
                    <Form.Item
                        label="管理员名称"
                        name="admin_name"
                        rules={[{ required: true, message: '请输入管理员名称' }]}
                    >
                        <Input placeholder="请输入管理员名称" style={{ height: "40px" }} />
                    </Form.Item>
                    {/* 邮箱 */}
                    <Form.Item
                        label="邮箱"
                        name="email"
                        rules={[{ required: true, message: '请输入邮箱' }]}
                    >
                        <Input placeholder="请输入邮箱" style={{ height: "40px" }} />
                    </Form.Item>
                    {/* 手机号 */}
                    <Form.Item
                        label="手机号"
                        name="mobile"
                        rules={[{ required: true, message: '请输入手机号' }]}
                    >
                        <Input placeholder="请输入手机号" style={{ height: "40px" }} />
                    </Form.Item>
                    {/* 管理员密码 */}
                    <Form.Item
                        label="管理员密码"
                        name="pwd"
                        rules={[{ required: true, message: '请输入密码' }]}
                    >
                        <Input.Password placeholder="请输入密码" style={{ height: "40px" }} />
                    </Form.Item>
                    {/* 确认密码 */}
                    <Form.Item
                        label="确认密码"
                        name="repwd"
                        rules={[{ required: true, message: '请输入再次输入密码' }]}
                    >
                        <Input.Password placeholder="请输入再次输入密码" style={{ height: "40px" }} />
                    </Form.Item>
                </div>
                <div className='adminAddRight'>
                    {/* 真实姓名 */}
                    <Form.Item
                        label="真实姓名"
                        name="real_name"
                        rules={[{ required: true, message: '请输入真实姓名' }]}
                    >
                        <Input placeholder="请输入真实姓名" style={{ height: "40px" }} />
                    </Form.Item>
                    {/* 部门 */}
                    <Form.Item
                        name="department"
                        label="部门"
                        rules={[
                            { type: 'array', required: true, message: '请选择' },
                        ]}
                    >
                        <Cascader placeholder="请选择" fieldNames={fieldName} options={departmentdata} />
                    </Form.Item>
                    {/* 角色 */}
                    <Form.Item label="角色" name="role">
                        <Radio.Group >
                            <Radio value="1"> 经管负责人 </Radio>
                            <Radio value="2"> 部门负责人 </Radio>
                        </Radio.Group>
                    </Form.Item>
                    {/* 是否启用 */}
                    <Form.Item label="是否启用" name="is_use" valuePropName="checked">
                        <Switch className='adminAddRightSwitch' />
                    </Form.Item>
                    {/* 备注 */}
                    <Form.Item name="remarks" label="备注" rules={[{ required: true, message: '请输入管理员名称' }]}>
                        <Input.TextArea placeholder="请输入管理员名称" className='adminAddRightInputTextArea' />
                    </Form.Item>
                    <Button htmlType="button" onClick={onReset}>重置</Button>
                    <Button type="primary" htmlType="submit">{!listId ? "添加" : "修改"}</Button>
                </div>
            </Form>
        </div>
    </>);
}

export default AdminAdd;